<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" back-icon-name="arrow-leftward" title-color="#FFFFFF"
			:background="background" :title="data.name || ''"></u-navbar>
		
		<u-notice-bar mode="horizontal" :list="noticeList" type="none"></u-notice-bar>
		
		<CompareImage :wrapper="wrapper" :height="height" :beforeImageUrl="beforeImageUrl || ''" :afterImageUrl="afterImageUrl || ''" />
		
		<u-divider border-color="#f96770" margin-top='40' color="#fc587d">此程序仅供娱乐</u-divider>
		
		<view v-if="selectList && selectList.length > 0" style="width: 80%;margin: 15rpx auto;display: block;">
			<u-button @click="showSelect()" type="default" shape="circle" :ripple="true">{{selectText}}</u-button>
		</view>
		
		<view style="width: 80%;margin: 15rpx auto;display: block;">
			<u-button @click="chooseImage()" type="error" shape="circle" :custom-style="buttonCustomStyle">选择图片</u-button>
		</view>

		<view v-if="image && getSuffix(image) != 'mp4'" class="save-btn">
			<!-- #ifdef H5 -->
			<u-button @click="previewImage()" type="default" shape="circle">预览并保存</u-button>
			<!-- #endif -->
			
			<!-- #ifndef H5 -->
			<view style="width: 45%;">
				<u-button @click="saveImg()" type="success" shape="circle">保存图片</u-button>
			</view>
			<view style="width: 45%;">
				<u-button @click="previewImage()" type="default" shape="circle">预览图片</u-button>
			</view>
			<!-- #endif -->
		</view>
		
		<view v-if="image && getSuffix(image) == 'mp4'" class="save-btn">
			<!-- #ifdef H5 -->
			<u-button type="default" shape="circle">复制下载链接</u-button>
			<!-- #endif -->
			
			<!-- #ifndef H5 -->
			<view style="width: 100%;">
				<u-button @click="saveVideo()" type="success" shape="circle">保存视频</u-button>
			</view>
			<!-- #endif -->
		</view>
		
		<u-select 
		v-model="isShowSelect" 
		:list="selectList" 
		:default-value="[0]"
		mode="single-column" 
		@confirm="selectConfirm" 
		confirm-color="#fc587d"></u-select>
	</view>
</template>

<script>
	import CompareImage from '@/components/jason-compareimage/CompareImage.vue'
	export default {
		components: {
			CompareImage
		},
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, #fc587d,#f96770)'
				},
				buttonCustomStyle: {
					'background-color': '#fc587d'
				},
				noticeList: [
					'左右拖动按钮可以看效果'
				],
				data: {},
				options: '',
				
				isShowSelect: false,
				selectText: '可选',
				selectList: [],
				
				phone_height: 657,
				height: 500,
				width: 850,
				
				// 生成后的图片
				image: '',
				// 上传的图片地址 
				uploadImage: '',
				beforeImageUrl: '',
				afterImageUrl: '',
				wrapper: false,
			};
		},
		onLoad(options) {
			let that = this;
			// #ifdef APP-NVUE
			const eventChannel = this.$scope.eventChannel;
			// #endif
			// #ifndef APP-NVUE
			const eventChannel = this.getOpenerEventChannel();
			// #endif
			
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				that.data = data;
				that.beforeImageUrl = data.before_img;
				that.afterImageUrl = data.after_img;
				
				// 处理下options
				if(data['options'] && data['options'].length > 0){
					that.selectList = [];
					that.selectText = data['options'][0]['name'];
					that.options = data['options'][0]['value'];
					
					data['options'].map((val,idx)=>{
						that.selectList.push({
							label: val.name,
							value: val.value
						})
					})
				}
			});
			
			uni.getSystemInfo({
				success(res) {
					that.phone_height = res.windowHeight
				}
			})
		},
		onShow() {
		},
		onReady() {
			
		},
		onUnload() {
			
		},
		methods: {
			chooseImage(){
				let that = this;
				
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: function(res) {
						let tempImagePath = res.tempFilePaths[0];
						
						// 清空之前选择的图片
						that.initImg();
						
						// 上传并检测图片合法性
						// #ifndef H5
						uni.compressImage({
							src: tempImagePath,
							quality: 80,
							success: res1 => {
								// 如果路径最后一位是.，则不上传压缩路径。
								let uploadPath = res1.tempFilePath;
								if(uploadPath.substr(uploadPath.length - 1, 1) == '.'){
									uploadPath = tempImagePath;
								}
								
								that.uploadImg(uploadPath);
							}
						})
						// #endif
						// #ifdef H5
						that.uploadImg(tempImagePath);
						// #endif
					}
				});
			},
			
			uploadImg(path){
				let that = this;
				
				uni.getImageInfo({
					src: path,
					success: function(image) {
						that.height = image.height / (image.width / that.width);
						// 竖图且大于屏幕70%，将高度直接减半显示
						if(image.height > image.width && image.height > that.phone_height * 0.7){
							that.height = that.height * 0.5
						}
					}
				});
				
				that.beforeImageUrl = path;
				that.wrapper = true;
			},
			showSelect(){
				this.isShowSelect = true;
			},
			selectConfirm(e){
				this.selectText = e[0]['label'];
				this.options = e[0]['value'];
			},
			initImg(){
				let that = this;
				that.afterImageUrl = that.data.after_img;
				that.beforeImageUrl = that.data.before_img;
				that.image = '';
				that.uploadImage = '';
			},
			saveImg(){
				let that = this;
				uni.getImageInfo({
					src: that.image,
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								that.globalUtil.utilAlert('图片保存成功');
							},
							fail(e) {
							}
						});
					}
				});
			},
			saveVideo(){
				let that = this;
				uni.downloadFile({
					url: that.image,
					success: function (res) {
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								that.globalUtil.utilAlert('视频保存成功');
							}
						});
					}
				});
			},
			previewImage() {
				let that = this;
				uni.previewImage({
					urls: [that.image],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getSuffix(url){
				return url.substring(url.lastIndexOf('.') + 1, url.length);
			},
		},
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	view,
	text {
		box-sizing: border-box;
	}
	/* #endif */
	
	.save-btn{
		width: 80%;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-between;
	}
</style>
